import React from 'react'
import { NavBar } from 'antd-mobile'
import { connect } from 'react-redux'
import { Switch, Route } from 'react-router-dom'
import NavLinkBar from '@/component/navlink/navlink'
import Boss from '@/component/boss/boss'
import Genius from '@/component/genius/genius'

function Msg() {
    return <h2>消息列表页面</h2>
}
function User() {
    return <h2>个人中心页面</h2>
}

@connect(
    state => state
)

class Dashboard extends React.Component {
    render() {
        const {pathname} = this.props.location
        const user = this.props.user
        const navList = [
            {
                path: '/boss',
                text: '实习生',
                icon: 'boss',
                title: '实习生列表',
                component: Boss,
                hide: user.type === 'genius'
            },
            {
                path: '/genius',
                text: 'Boss',
                icon: 'job',
                title: 'Boss列表',
                component: Genius,
                hide: user.type === 'boss'
            },
            {
                path: '/msg',
                text: '消息',
                icon: 'msg',
                title: '消息列表',
                component: Msg
            },
            {
                path: '/me',
                text: '我',
                icon: 'user',
                title: '个人中心',
                component: User
            }
        ]

        return (
            <div>
                <NavBar className='fixd-header' mode='dard'>
                    {navList.find(v => v.path === pathname).title}
                </NavBar>

                <div className='container'>
                    <Switch>
                        {navList.map(v => (<Route key={v.path} path={v.path} component={v.component} />))}
                    </Switch>
                </div>

                <NavLinkBar data={navList} />
            </div>
        )
    }
}

export default Dashboard